<template>
  <div>
    <el-upload
      action="#"
      list-type="picture-card"
      :limit="1"
      :file-list="fileList"
      :http-request="updateFn"
      :on-remove="handleRemove"
      :class="{active:fileList.length>0}"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-progress v-if="show" :percentage="plan" />
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5'
var cos = new COS({
  SecretId: 'AKID2tUoreBSR9bniLjrQoysWsypOghSw95q',
  SecretKey: 'OXP0LOAesqYzECtJTM0NTJsABxSgdJju'
})

export default {
  data() {
    return {
      fileList: [], // 保存图片地址
      show: false,
      plan: 0
    }
  },
  methods: {
    handleRemove(file, fileList) {
      this.fileList = []
    },
    updateFn(file) {
      // 上传图片
      this.fileList.push({
        url: ''
      })
      this.show = true
      cos.putObject({
        Bucket: 'hr-zhoushuren-1312551878', /* 存储桶名字 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: `${Date.now()}`, /* 必须 */
        StorageClass: 'STANDARD',
        Body: file.file, // 上传文件对象
        onProgress: (progressData) => {
          this.plan = progressData.percent * 100
        }
      }, (err, data) => {
        if (err) {
          return this.$message.error('上传错误')
        }
        this.fileList[0].url = 'http://' + data.Location
        setTimeout(() => {
          this.show = false
        }, 1000)
      })
    }
  }
}
</script>
<style lang='scss' >
.active{
  .el-upload--picture-card {
    display: none;
  }
}
.el-progress{
  width: 200px;
}

</style>
